<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="auture" content="腾">
    <title>h5学习网址总集</title>
    <script src="vue.js"></script>
    <style>
        ul{
            float: left;
            /*text-align: center;*/
        }
        .box{
            height: 450px;
            overflow: auto;
        }
        .fixHeader{
            /*position: fixed;*/
            /*top: 50px;*/
        }
    </style>
</head>

<body>
    <div id="app">
        <ul class="box" v-for="(value,key) in goal">
            <h2 class="fixHeader">{{key}}</h2>
            <li v-for="(value0,key0) in value">
                <a target="_blank" :href="value0">{{key0}}</a>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    // h5基础
    let goal = {
        h5:{
            '菜鸟教程': 'http://www.runoob.com/',
            MDN: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/',
            animate动画css:'https://daneden.github.io/animate.css/',
        },
        // nodejs
        nodejs: {
            nodejs: 'https://nodejs.org/en/',
            // express
            express: 'http://www.expressjs.com.cn/',
            
        },
        jQuery: {
            // jQueryAPI中文文档
            jQueryAPI: 'http://www.css88.com/jqapi-1.9/',
        },
        npm: {
            npm: 'https://www.npmjs.com/',
            'yarn(包管理工具)':'https://yarn.bootcss.com/docs/usage.html',
        },
        // 插件或框架
        plugs: {
            bootstrap插件: 'http://v3.bootcss.com/',
            jquery插件库: 'http://www.jq22.com/',
            jquery之家库:'http://www.htmleaf.com/',
            SuperSlide: 'http://www.superslide2.com/demo.html#effect2',
            图片轮播:'http://www.tuicool.com/articles/ey6fQ3f',
            swiper中文网:'http://www.swiper.com.cn/',
            lodash:'http://lodashjs.com/',
            弹出层fancyBox:'http://fancybox.net/',
            tween平滑动画:'http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html',
            KingMax焦点图:'http://d.lanrentuku.com/down/js/jiaodiantu-989/',
            'art-template框架':'http://www.jq22.com/jquery-info1097',
            Vuejs框架: 'https://cn.vuejs.org/v2/api/#search-query-nav',
            AMD定义模块:'https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)',
            CommonJS规范:'http://javascript.ruanyifeng.com/nodejs/module.html',
            路由教程:'https://router.vuejs.org/zh-cn/essentials/getting-started.html',
            vux:'https://vux.li/#/',
            vuex:'https://vuex.vuejs.org/zh-cn/',
            typescript中文:"https://www.tslang.cn/index.html",
            'angular2/4':'https://www.angular.cn/',
            'angular2/4生命钩子':'http://blog.csdn.net/feifei159/article/details/54289030',
            "打包":'http://blog.csdn.net/zhaohaixin0418/article/details/55505873',
            ionic官网:'http://ionicframework.com/',
            ionic中文网:'https://yanxiaodi.gitbooks.io/ionic2-guide/content/components/range.html',
            ionic的环境搭建教程:'http://www.w2bc.com/article/246546',
            react官网:'https://facebook.github.io/react/docs/hello-world.html',
            react中文:'http://www.react-cn.com/index.html',
            'axios react发送ajax插件':'https://www.npmjs.com/package/axios',
            react路由配置:'http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu',
            'react ant':'https://ant.design/index-cn',
            redux基础:'http://www.redux.org.cn/docs/react-redux/api.html',
        },
        // 其他工具
        others: {
            webpack打包工具:'http://www.jianshu.com/p/b95bbcfc590d',
            图文转换: 'http://www.sojson.com/image2base64.html',
            ES6: 'http://es6.ruanyifeng.com/',
            码云:'https://git.oschina.net/',
            项目中国:'http://www.oschina.net/',
            h5尸体:'https://www.nowcoder.com/profile/1784475',
        },
        
    }
    // 使用vue
    let app = new Vue({
        el: '#app',
        data: {
            goal: goal,
        },
    })

</script>